
<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <!-- <input placeholder="手机号码"
             class="input">
      <input placeholder="昵称"
             type="password"> -->
      <HmInput :reg='/^1[3,4,5,7,8,9]\d{9}$/'
               ref="username"
               v-model="user.username"
               placeholder="请输入手机号" />
      <HmInput v-model="user.nickname"
               ref="nickname"
               placeholder="请输入昵称" />
      <HmInput v-model="user.password"
               ref="password"
               :reg="/^[a-zA-Z0-9_-]{4,16}$/"
               placeholder="请输入密码" />
    </div>
    <p class="tips">
      有账号？
      <a href="#/login"
         class="">去登录</a>
    </p>
    <!-- <div class="button">注册</div> -->
    <van-button round
                icon="star-o"
                type="primary"
                @click="registerFn"
                block>注册</van-button>
  </div>
</template>

<script>
import HmInput from '../components/HmInput.vue'
import { register } from '../api/user'
export default {
  components: { HmInput },
  data() {
    return {
      user: {
        username: '',
        password: '',
        nickname: '',
      },
    }
  },
  methods: {
    registerFn() {
      if (!this.$refs.username.isOk) {
        this.$toast.fail('账号输入不符合规则')
        return
      }
      if (!this.$refs.password.isOk) {
        this.$toast.fail('密码请输入4到16位字符')
        return
      }
      if (!this.$refs.nickname.isOk) {
        this.$toast.fail('昵称不能为空')
        return
      }
      //   添加加载效果
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0, // 持续展示 toast
      })
      register(this.user).then((res) => {
        // 判断是否注册成功
        if (res.data.message == '注册成功') {
          // 跳转到等了页面
          this.$toast.success('注册成功')
          this.$router.push('/login')
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: (27 / 360) * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360) * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>